<template>
	<view class="page">
		<view class="img-view">
			<image :src="headerBgUrl" mode="aspectFill"></image>
		</view>
		<view class="flex flex-column flex-1 align-center rounded-top-32 bg-white mt-032 position-absolute">
			<view class="flex align-center mt-2">
				<text class="font-md text-black font-weight-bold m-2">张静初</text>
			</view>
			<view class="flex flex-wrap">
				<view class="border rounded32 text-lightbule font-sm mx-2 my-1 px-2" v-for="(item2,index2) in setlist" :key="index2">{{item2.name}}</view>
			</view>
			<view class="flex align-center">
				<text class="font text-warning font-weight-bold mr-2">4.95</text>
				<sunui-star :defaultStar="4.5" :disabledStar="true" class="sunui-star" />
			</view>
			<text class="font-sm text-dark m-2">江苏·苏州</text>
			<view class="flex align-center w-80 mx-4">
				<view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in myData" :key="index">
					<text class="font-lg font-weight-bold text-main">{{item.num}}</text>
					<text class="font-sm text-muted text-lightbule">{{item.name}}</text>
				</view>
			</view>

			<view class="flex flex-column flex-1 m-2 text-left">
				<text class="font text-black text-warning-line-1 m-2">执业8年，毕业于西南政法大学法律系。多次被评为省职、市职优秀律师称号。</text>
			</view>

		</view>
		<view class="example-body mt-640">
			<text class="font-md text-dark mx-4 text-bold flex">科普视频</text>
			<uni-grid :column="2" :highlight="true" @change="change" :square="false" :showBorder="false">
				<uni-grid-item v-for="(item, index) in sciencelist" :index="index" :key="index">
					<popular-item :item="item" :index="index" :gridWidth="gridWidth"></popular-item>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	const sciencedemo = [{
		avatar: "/static/default.jpg",
		picurl: "https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title: "被公司单方面解决劳动合同该怎么办？",
		newstime: "02:05",
		view_count: 100
	}, {
		avatar: "/static/default.jpg",
		picurl: "https://img.xiaopiu.com/userImages/img315969455ab0.jpg",
		title: "被公司单方面解决劳动合同该怎么办？",
		newstime: "02:05",
		view_count: 100
	}, {
		avatar: "/static/default.jpg",
		picurl: "https://img.xiaopiu.com/userImages/img6159694579f0.jpeg",
		title: "被公司单方面解决劳动合同该怎么办？",
		newstime: "02:05",
		view_count: 100
	}, {
		avatar: "/static/default.jpg",
		picurl: "https://img.xiaopiu.com/userImages/img315969455ab0.jpg",
		title: "被公司单方面解决劳动合同该怎么办？",
		newstime: "02:05",
		view_count: 100
	}];
	import popularItem from '@/components/news/popular-item.vue';
	export default {
		components: {
			popularItem
		},
		data() {
			return {
				scrollH: 500,
				gridWidth: 160,
				headerBgUrl: '/static/bgimg/img9159694579f0.jpg',
				setlist: [{
					name: "情感纠纷"
				}, {
					name: "经济合同"
				}, {
					name: "情感纠纷"
				}],
				myData: [{
					name: "执业年限",
					num: 5
				}, {
					name: "收费分钟",
					num: "￥15"
				}, {
					name: "服务时长",
					num: 8821
				}, {
					name: "帮助人数",
					num: 1258
				}],
				sciencelist: [],
			}
		},
		onLoad(e) {
			// 初始化
			uni.getSystemInfo({
				success: res => {
					this.gridWidth = res.windowWidth / 2 - 32;
					this.scrollH = res.windowHeight - res.statusBarHeight - 44;
					// console.log(this.gridWidth);
					// console.log(uni.upx2px(120));
				}
			});
			// 加载测试数据
			this.sciencelist = sciencedemo;
			console.log(this.sciencelist);
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
		}
	}
</script>

<style>
	page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #FFFFFF;
			min-height: 100%;
			height: auto;
		}
	image,
	.img-view {
		width: 100%;
		height: 720rpx;
	}

	.page-section-title {
		margin-top: 50rpx;
	}

	.uni-grid-item:nth-of-type(odd) {
		padding: 8rpx 8rpx 8rpx 24rpx;
	}

	.uni-grid-item:nth-of-type(even) {
		padding: 8rpx 24rpx 8rpx 8rpx;
	}
</style>
